<template>
  <view class="container">
    <view class="grid-body mt-30" v-for="(item, index) in dataList" :key="index">
      <view class="check grid-common">
        <view class="title flex">{{ index + 1 }} {{ item.itemName }}</view>
        <view class="flex text">
          排查内容：
          <text>{{ item.itemContent }}</text>
        </view>
        <view class="flex text">
          排查依据：
          <text>{{ item.itemBasis }}</text>
        </view>
        <view class="flex text">
          排查方法：
          <text>{{ item.itemMethod }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { hiddenDangerCheckItem } from '@/api/dbd/hiddenDangerCheck.js'
import { managerSourceEnum } from '@/utils/constant.js'

export default {
  data() {
    return {
      managerSourceEnum,
      planTaskId: null,
      subTaskId: null,
      dataList: [],
      location: '',
      riskName: ''
    }
  },
  onLoad(option) {
    this.planTaskId = option.id
    this.getData()
  },
  methods: {
    getData() {
      hiddenDangerCheckItem(this.planTaskId).then((res) => {
        this.dataList = JSON.parse(res.data.troubleshooting)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0 20rpx;
}
.check {
  position: relative;

  .title {
    font-size: 34rpx;
    font-weight: 700;
  }

  .icon-style {
    width: 52rpx;
    height: 52rpx;
    margin-right: 20rpx;
  }

  .text {
    color: #999;

    text {
      font-size: 28rpx;
      color: #666;
    }
  }

  .blue-dot {
    position: relative;
    padding-left: 20rpx;

    &::before {
      position: absolute;
      content: '';
      left: 0;
      top: 6rpx;
      width: 8rpx;
      height: 28rpx;
      background-color: #c4c088;
      border-radius: 6rpx;
    }
  }

  .bor-top {
    margin-top: 20rpx;
    height: 1px;
    line-height: 1px;
    border-bottom: 1rpx dashed #d5d7e3;
    border-top: none;
  }

  .check-right-top {
    position: absolute;
    right: 20rpx;
    top: 40rpx;
    image {
      width: 100rpx;
      height: 88rpx;
    }
  }
}
.submit-group {
  background: #fff;
  z-index: 9;
  padding: 30px;
}
.grid-body {
  margin-left: 0;
  margin-right: 0;
}

.button-wrap {
  padding: 30rpx;
  display: flex;

  .space {
    width: 50rpx;
  }

  .submit-button,
  .draft-button {
    flex: 1;
    color: #ffffff;
    line-height: 88rpx;
    text-align: center;
    border-radius: 50rpx;
    font-size: 36rpx;
  }

  .submit-button {
    background: #454a5e;
  }

  .draft-button {
    background: #c4c088;
  }
}
</style>
